
function draw(req,chart,data) {
	if(req.chart_type == 'pie2') {
	   	draw_pie2(chart,data.values.data);
	   }
	  if(req.chart_type == 'bar') {
	   	draw_bar(chart,data.values.data);
	   }
	  if(req.chart_type == 'words') {
		 draw_words(chart,data.values.data);
	  }
	  if(req.chart_type == 'line') {
		 draw_line(chart,data.values.data);
	  }
}
function draw_line(chart,data) {
	let position = "";
	let color = "";
	let json = data.requestJson;
	let jsonObj = JSON.parse(json);
	let m = jsonObj.metric;
	while(m[0] && m[0].metric){
		m = m[0].metric;
	}
	let met = "__doc";
	let tag = 0;
	if(m[0]) {
		console.log(m[0].type)
		if(m[0].type == 'avg' || m[0].type == 'sum') {
			tag = 1;
			met = m[0].type
		}
	}

	let fieldList = data.fieldList;
	if(fieldList.length-tag == 1) {
		position = fieldList[0].id;
	}
	if(fieldList.length-tag == 2) {
		color = fieldList[1].id+"";
		position = fieldList[0].id;
	}
	chart.data(data.listData);
	if(jsonObj.dimension.type) {
		let t = jsonObj.dimension.type;
		if(t == 'date') {
			let opt = {};
			opt[fieldList[0].id+""] = {nice:true,type: 'time',mask:'YYYY-MM-dd HH:mm'};
			chart.scale(opt);
		}
	}
	chart.tooltip({
		  showMarkers: false,
		  shared: true,
		});
	chart.interaction('element-highlight');
	let geom = chart.line().position(position+"*"+met);
	if(color != "") {
		geom.color(color);
		geom.adjust([
		    {
		        type: 'dodge',
		        marginRatio: 0,
		      },
		    ]);
		if(jsonObj.dimension.type) {
			let t = jsonObj.dimension.type;
			if(t == 'date') {
				geom.adjust([
				    {
				        type: 'stack',
				        marginRatio: 0,
				      },
				    ]);
			}
		}
		
	}else{
		geom.color('blue');
	}
}
function draw_area(chart,data) {
	let position = "";
	let color = "";
	let json = data.requestJson;
	let jsonObj = JSON.parse(json);
	let m = jsonObj.metric;
	while(m[0] && m[0].metric){
		m = m[0].metric;
	}
	let met = "__doc";
	let tag = 0;
	if(m[0]) {
		console.log(m[0].type)
		if(m[0].type == 'avg' || m[0].type == 'sum') {
			tag = 1;
			met = m[0].type
		}
	}

	let fieldList = data.fieldList;
	if(fieldList.length-tag == 1) {
		position = fieldList[0].id;
	}
	if(fieldList.length-tag == 2) {
		color = fieldList[1].id+"";
		position = fieldList[0].id;
	}
	chart.data(data.listData);
	chart.tooltip({
		  showMarkers: false,
		  shared: true,
		});
	//chart.interaction('element-highlight');
	chart.tooltip({
	  showCrosshairs: true,
	  shared: true,
	});
	let geom = chart.area().adjust('stack').position(position+"*"+met);
	if(color != "") {
		geom.color(color);
		geom.adjust([
		    {
		        type: 'dodge',
		        marginRatio: 0,
		      },
		    ]);
		if(jsonObj.dimension.type) {
			let t = jsonObj.dimension.type;
			if(t == 'date') {
				geom.adjust([
				    {
				        type: 'stack',
				        marginRatio: 0,
				      },
				    ]);
			}
		}
	}else{
		geom.color('blue');
	}

}
function draw_bar(chart,data) {
	let position = "";
	let color = "";
	let json = data.requestJson;
	let jsonObj = JSON.parse(json);
	let m = jsonObj.metric;
	while(m[0] && m[0].metric){
		m = m[0].metric;
	}
	let met = "__doc";
	let tag = 0;
	if(m[0]) {
		console.log(m[0].type)
		if(m[0].type == 'avg' || m[0].type == 'sum') {
			tag = 1;
			met = m[0].type
		}
	}

	let fieldList = data.fieldList;
	if(fieldList.length-tag == 1) {
		position = fieldList[0].id+"";
	}
	if(fieldList.length-tag == 2) {
		color = fieldList[1].id+"";
		position = fieldList[0].id+"";
	}
	chart.data(data.listData);
	if(jsonObj.dimension.type) {
		let t = jsonObj.dimension.type;
		if(t == 'date') {
			let opt = {};
			opt[fieldList[0].id+""] = {nice:true,type: 'time',mask:'YYYY-MM-dd HH:mm'};
			chart.scale(opt);
		}
	}
	chart.tooltip({
		  showMarkers: false,
		  shared: true,
		});
	chart.interaction('active-region');
	let geom = chart.interval().position(position+"*"+met);
	if(color != "") {
		geom.color(color);
		geom.adjust([
		    {
		        type: 'dodge',
		        marginRatio: 0,
		      },
		    ]);
		if(jsonObj.dimension.type) {
			let t = jsonObj.dimension.type;
			if(t == 'date') {
				geom.adjust([
				    {
				        type: 'stack',
				        marginRatio: 0,
				      },
				    ]);
			}
		}

	}else{
		geom.color('blue');
	}
}
function draw_pie2(chart,data) {
	let fl = data.fieldList;
	let p = "";
	for(let f in fl){
		if(p == "") {
			p = fl[f].id;
		}else {
			p = p + "*" + fl[f].id;
		}
	}
	let v = chart;
	v.data(data.listData);
	v.coordinate('theta', {
		  radius: 0.75,
		  innerRadius: 0.6,
		});
	v.tooltip({
		  showTitle: false,
		  showMarkers: false,
		  itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
		});
	v
	  .interval()
	  .adjust('stack')
	  .position("__doc")
	  .color(p+'');
	v.interaction('element-active');
	console.log(p);
}
function draw_words(chart,data) {
	function getTextAttrs(cfg) {
		  return {
		    ...cfg.style,
		    fontSize: cfg.data.size,
		    text: cfg.data.text,
		    textAlign: 'center',
		    fontFamily: cfg.data.font,
		    fill: cfg.color,
		    textBaseline: 'Alphabetic'
		  };
		}
	// 给 point 注册一个词云的 shape
	G2.registerShape('point', 'cloud', {
	  draw(cfg, container) {
	    const attrs = getTextAttrs(cfg);
	    const textShape = container.addShape('text', {
	      attrs: {
	        ...attrs,
	        x: cfg.x,
	        y: cfg.y
	      }
	    });
	    if (cfg.data.rotate) {
	    	G2.Util.rotate(textShape, cfg.data.rotate * Math.PI / 180);
	    }
	    return textShape;
	  }
	});
	let fl = data.fieldList;
	let json = data.requestJson;
	let jsonObj = JSON.parse(json);
	let p = "";
	for(let f in fl){
		if(p == "") {
			p = fl[f].id+"";
		}else {
			p = p + "*" + fl[f].id;
		}
	}
	let m = jsonObj.metric;
	while(m[0] && m[0].metric){
		m = m[0].metric;
	}
	let met = "__doc";
	let tag = 0;
	if(m[0]) {
		console.log(m[0].type)
		if(m[0].type == 'avg' || m[0].type == 'sum') {
			tag = 1;
			met = m[0].type
		}
	}
	 const dv = new DataSet.View().source(data.listData);
	    const range = dv.range(met);
	    const min = range[0];
	    const max = range[1];
	    const imageMask = new Image();
	      dv.transform({
	        type: 'tag-cloud',
	        fields: [p, met],
	        imageMask,
	        font: 'Verdana',
	        size: [600, 400], // 宽高设置最好根据 imageMask 做调整
	        padding: 0,
	        timeInterval: 5000, // max execute time
	        rotate() {
	          let random = ~~(Math.random() * 4) % 4;
	          if (random === 2) {
	            random = 0;
	          }
	          return 0;//random * 90; // 0, 90, 270
	        },
	        fontSize(d) {
	          return ((d[met] - min) / (max - min)) * (32 - 8) + 8;
	        }
	      });
	      chart.data(dv.rows);
	      chart.scale({
	        x: { nice: false },
	        y: { nice: false }
	      });
	      chart.legend(false);
	      chart.axis(false);
	      chart.tooltip({
	        showTitle: false,
	        showMarkers: false
	      });
	      chart.coordinate().reflect();
	      chart.point()
	        .position('x*y')
	        .color('text')
	        .shape('cloud')
	        .state({
	          active: {
	            style: {
	              fillOpacity: 0.4
	            }
	          }
	        });
	      chart.interaction('element-active');
	      chart.render();
}